<!-- 图表 -->
<template>
    <div style="width: 90%;margin: auto;">
        <div style="display: flex;padding: 3% 3%">
            <div style="flex: 1;">
                <div id="chartColumn" style="width:100%; height:500px;"></div>
            </div>
            <div style="flex: 1;">
                <div id="chartBar" style="width:100%; height:500px;"></div>
            </div>
        </div>
        <div style="display: flex;padding: 0 3%">
            <div style="flex: 1;">
                <div id="chartLine" style="width:100%; height:500px;"></div>
            </div>
            <div style="flex: 1;">
                <div id="chartPie" style="width:100%; height:500px;"></div>
            </div>
        </div>
    </div>
    <!--<section class="chart-container">-->
        <!--<el-row>-->
            <!--<el-col :span="12">-->
                <!---->
            <!--</el-col>-->
            <!--<el-col :span="12">-->
                <!---->
            <!--</el-col>-->
            <!--<el-col :span="12">-->
                <!---->
            <!--</el-col>-->
            <!--<el-col :span="12">-->
                <!---->
            <!--</el-col>-->
        <!--</el-row>-->
    <!--</section>-->
</template>

<script>
    import echarts from 'echarts'
    export default {
        data() {
            return {
                chartColumn: null,
                chartBar: null,
                chartLine: null,
                chartPie: null
            }
        },

        methods: {
            drawColumnChart() {
                this.chartColumn = echarts.init(document.getElementById('chartColumn'));
                this.chartColumn.setOption({
                    title: { text: '销售统计' },
                    tooltip: {},
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量/万',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });
            },
            drawBarChart() {
                this.chartBar = echarts.init(document.getElementById('chartBar'));
                this.chartBar.setOption({
                    title: {
                        text: '客户分布',
                        subtext: '数据来自网络'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['2010年', '2016年']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: [ '印尼', '美国', '印度', '中国', '总销量(万)']
                    },
                    series: [
                        {
                            name: '2010年',
                            type: 'bar',
                            data: [ 13489, 19034, 104970, 201744, 360230]
                        },
                        {
                            name: '2016年',
                            type: 'bar',
                            data: [ 13438, 11000, 121594, 204141, 361807]
                        }
                    ]
                });
            },
            drawLineChart() {
                this.chartLine = echarts.init(document.getElementById('chartLine'));
                this.chartLine.setOption({
                    title: {
                        text: '销售人群'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['儿童', '老人', '成人']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2010', '2011', '2012', '2013', '2014', '2015', '2016']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '儿童',
                            type: 'line',
                            stack: '总量',
                            data: [120000, 132000, 101000, 134000, 90000, 230000, 210000]
                        },
                        {
                            name: '老人',
                            type: 'line',
                            stack: '总量',
                            data: [220000, 182000, 191000, 234000, 290000, 330000, 310000]
                        },
                        {
                            name: '成人',
                            type: 'line',
                            stack: '总量',
                            data: [820000, 932000, 901000, 934000, 1290000, 1330000, 1320000]
                        }
                    ]
                });
            },
            drawPieChart() {
                this.chartPie = echarts.init(document.getElementById('chartPie'));
                this.chartPie.setOption({
                    title: {
                        text: '销售渠道',
                        subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
//                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['客户', '网络', '广告', '线下', '其他']
                    },
                    series: [
                        {
                            name: '销售渠道',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                { value: 0.3, name: '客户' },
                                { value: 0.3, name: '网络' },
                                { value: 0.25, name: '广告' },
                                { value: 0.1, name: '线下' },
                                { value: 0.05, name: '其他' },
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
            drawCharts() {
                this.drawColumnChart()
                this.drawBarChart()
                this.drawLineChart()
                this.drawPieChart()
            },
        },

        mounted: function () {
            this.drawCharts()
        },
        updated: function () {
            this.drawCharts()
        }
    }
</script>

<style>
    .chart-container {
        width: 100%;
        float: left;
    }
    .chart div {
        height: 400px;
        float: left;
    }

    el-col {
        padding: 30px 20px;
    }
</style>



<!--<template>-->
    <!--<div id="app">-->
        <!--<div style="display: flex;">-->
            <!--<div style="flex: 1;background-color: aqua">-->
                <!--<schart :canvasId="canvasId" :type="type"-->
                        <!--:width="width" :height="height"-->
                        <!--:data="data" :options="options">-->
                <!--</schart>-->
            <!--</div>-->
            <!--<div style="flex: 1;background-color: fuchsia">-->
                <!--<schart :canvasId="canvasId1" :type="type"-->
                        <!--:width="width" :height="height"-->
                        <!--:data="data" :options="options1">-->
                <!--</schart>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</template>-->
<!--<script>-->
    <!--import Schart from 'vue-schart';-->
    <!--export default {-->
        <!--data() {-->
            <!--return {-->
                <!--canvasId: 'myCanvas',-->
                <!--type: 'bar',-->
                <!--width: 800,-->
                <!--height: 600,-->
                <!--data:[-->
                    <!--{name: '2014', value: 1342},-->
                    <!--{name: '2015', value: 2123},-->
                    <!--{name: '2016', value: 1654},-->
                    <!--{name: '2017', value: 1795},-->
                <!--],-->
                <!--options: {-->
                    <!--title: '图表1'-->
                <!--},-->


                <!--canvasId1: 'myCanvas1',-->
                <!--type: 'bar',-->
                <!--width: 800,-->
                <!--height: 600,-->
                <!--data:[-->
                    <!--{name: '2014', value: 1342},-->
                    <!--{name: '2015', value: 2123},-->
                    <!--{name: '2016', value: 1654},-->
                    <!--{name: '2017', value: 1795},-->
                <!--],-->
                <!--options1: {-->
                    <!--title: '图表2'-->
                <!--}-->
            <!--}-->
        <!--},-->
        <!--components:{-->
            <!--Schart-->
        <!--}-->
    <!--}-->
<!--</script>-->